<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script type="text/javascript" src="js/init.js"></script>
		<style>
			.f1{
				animation: f1 2s;
				-webkit-animation: f1 2s;
				-moz-animation: f1 2s;
				-ms-animation: f1 2s;
			}
			@keyframes f1{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-webkit-keyframes f1{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-moz-keyframes f1{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-ms-keyframes f1{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			.f2{
				animation: f2 4s;
				-webkit-animation: f2 4s;
				-moz-animation: f2 4s;
				-ms-animation: f2 4s;
			}
			@keyframes f2{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-webkit-keyframes f2{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-moz-keyframes f2{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-ms-keyframes f2{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			.f3{
				animation: f3 6s;
				-webkit-animation: f3 6s;
				-moz-animation: f3 6s;
				-ms-animation: f3 6s;
			}
			@keyframes f3{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-webkit-keyframes f3{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-moz-keyframes f3{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-ms-keyframes f3{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			.f4{
				animation: f4 8s;
				-webkit-animation: f4 8s;
				-moz-animation: f4 8s;
				-ms-animation: f4 8s;
			}
			@keyframes f4{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-webkit-keyframes f4{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-moz-keyframes f4{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-ms-keyframes f4{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			.f5{
				animation: f5 10s;
				-webkit-animation: f5 10s;
				-moz-animation: f5 10s;
				-ms-animation: f5 10s;
			}
			@keyframes f5{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-webkit-keyframes f5{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-moz-keyframes f5{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-ms-keyframes f5{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			.f6{
				animation: f6 12s;
				-webkit-animation: f6 12s;
				-moz-animation: f6 12s;
				-ms-animation: f6 12s;
			}
			@keyframes f6{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-webkit-keyframes f6{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-moz-keyframes f6{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-ms-keyframes f6{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			.f7,.t{
				animation: f7 14s;
				-webkit-animation: f7 14s;
				-moz-animation: f7 14s;
				-ms-animation: f7 14s;
			}
			@keyframes f7{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-webkit-keyframes f7{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-moz-keyframes f7{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			@-ms-keyframes f7{
				0%{opacity: 1;}
				100%{opacity: 0;}
			}
			.chicken-feet{
				animation: chicken-feet 4s;
				-webkit-animation: chicken-feet 4s;
				-moz-animation: chicken-feet 4s;
				-ms-animation: chicken-feet 4s;
			}
			@keyframes chicken-feet{
				0%{width: 10%;}
				100%{width: 100%;}
			}
			@-webkit-keyframes chicken-feet{
				0%{width: 10%;}
				100%{width: 100%;}
			}
			@-moz-keyframes chicken-feet{
				0%{width: 10%;}
				100%{width: 100%;}
			}
			@-ms-keyframes chicken-feet{
				0%{width: 10%;}
				100%{width: 100%;}
			}
		</style>
	</head>
	<body>
		<div class="last">
			<img src="img/bg.jpg" class="wid100 hei100 pa"/>
			<img src="img/last-title.png" class="last-title t"/>
			<div class="flower pr">
				<img src="img/f1.png" class="wid100 f1"/>
				<img src="img/f2.png" class="f2"/>
				<img src="img/f3.png" class="f3"/>
				<img src="img/f4.png" class="f4"/>
				<img src="img/f5.png" class="f5"/>
				<img src="img/f6.png" class="f6"/>
				<img src="img/f7.png" class="f7"/>
			</div>
			</p>
			<p class="game-rule t">
				<a href="javascript:void(0);">Art Of China Year</a>
			</p>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
	<script>
		$(document).ready(function(){
			/***禁止滑动***/
			var mo = function(e){e.preventDefault();};
			function stop(){
		        document.body.style.overflow='hidden';        
		        document.addEventListener("touchmove",mo,false);//禁止页面滑动
			}
			stop();
			
			$(".last").click(function(){
				window.location = 'index.html';
			});
		});
		
	</script>
</html>
